<template>
  <div class="alerts-card__wrap">
    <div class="alerts-card">
      <div class="alerts-card__header">
        <div class="header-title">消息通知</div>
<!--        <div class="header-read"  @click="handleRead" v-if="flag !== 4">全部标记已读</div>-->
<!--        <div class="header-delete" @click="handleClick" v-if="flag === 4">全部清空</div>-->
      </div>
      <div class="alerts-card__content">
        <p v-if="message.length === 0">暂无消息</p>
        <alerts-content
          v-for="(item, index) in message"
          :key="`${item}${index}`"
          :info="item"
          v-if="reload"
        ></alerts-content>
      </div>

      <div class="alerts-card__footer">
        <nuxt-link to="/personal-center/message/all">查看全部 （ {{ totalRecords }} ） </nuxt-link>
      </div>
    </div>
  </div>
</template>

<script>
import AlertsContent from './alertsContent';
import config from '../../../action/config'
export default {
  name: "alertsCard",
  components: {
    AlertsContent
  },
  data(){
    return{
      messageRead: new Set(),
      message:[],
      isShow: true,
      reload: true,
      flag: 0,
      totalRecords:0
    }
  },
  created(){
    this.dataGetMessages();

  },
  computed: {
    unread: function () {
      let flag = this.flag;
      return this.message.length ? this.message.length - flag : 0
    }
  },
  methods:{

    dataGetMessages() {
      this.$axios.$get(config.api.get.Message.list, {
        params: {
          page: 1,
          size: 4
        }
      }).then((response) => {
        this.message = response.data.dataList;
        this.totalRecords = response.data.totalRecords;
        this.$axios.$get(config.api.get.Message.count).then(response => {
          if (response.code === 0) {
            this.$store.commit('message/setUnReadCount', response.data.unReadCount);
          }
        })
      });
    },


    handleRead(){
      this.$axios.$put(config.api.put.Message.readAll).then((response)=>{
        if(this.message.length!==0) {
          this.$message({
            type: 'success',
            message: '已全部标记已读'
          });
          this.flag = 4
        }else{
          this.$message({
            type: 'warning',
            message: '没有未读信息'
          });
        }
      })
    },
    handleClick(){
      this.$axios.$delete(config.api.delete.Messages.delete).then((response)=>{
        this.$message({
          type: 'success',
          message: '已全部清空'
        });
       this.message.length=0;
      })


    }
    /*// 找到已读消息的下标
    handleReader(index){

      //this.$axios.$put(config.api.put.Message.read+)
      this.messageRead.add(index);
      console.log(this.messageRead);
      console.log(this.messageRead.size);
      console.log(this.unread);
    },
    // 将下标符合的消息中的属性修改未true
    handleRead(){
      this.message.forEach((item, index) => {
        this.messageRead.forEach((item2, e) => {
          if (item.content === item2){
            item.status = 1;
          }

        })
      });
      this.flag = this.messageRead.size; // 已读个数
      // 重新渲染子组件
      this.reload = false;
      this.$nextTick(() =>{
        this.reload = true;
      });
    },
    // 清空全部已读消息
    handleClick(){
      // 重置计数要删除的个数
      this.flag = 0;
      this.messageRead.clear();
      let i = 0;
      for (i = this.message.length -1 ; i >= 0; i--){
        if (this.message[i].isRead) {
          this.message.splice(i, 1);
        }
      }
      // 重新渲染子组件
      this.reload = false;
      this.$nextTick(() =>{
        this.reload = true;
      });
    }*/
  }
}
</script>

<style lang="scss" scoped>
.alerts-card__wrap{
  .alerts-card{
    width: 300*$length;
    height: 274*$length;
    background-color: #fff;
    @include border-radius(4*$length);
    @include box-shadow(0 5*$length 20*$length rgba(0,0,0,.08));
    .alerts-card__header{
      border-bottom: 1*$length solid #EFEFEF;
      @extend %flex-row-spb;
      .header-title{
        margin-left: 16*$length;
        @extend %cursorPointer;
        @include fontStyle(16,56,500,#2F2F2F,left);
      }
      .header-read{
        margin-right: 16*$length;
        @extend %cursorPointer;
        @include fontStyle(13,56,500,#999,left);
      }
      .header-delete{
        margin-right: 16*$length;
        @extend %cursorPointer;
        @include fontStyle(13,56,500,#999,left);
      }
    }
    .alerts-card__content{
      height: 173*$length;
      border-bottom: 1*$length solid #EFEFEF;
      overflow: hidden;
      > p {
        @include fontStyle(12,173,500,#AAA,center);
      }
    }
    .alerts-card__footer{
      @extend %cursorPointer;
      @extend %animate-transition;
      @include fontStyle(12,45,500,#333,center);
      &:hover{
        color: #00AAE6;
      }
    }
  }
}
</style>
